<template>
  <div id="app">
    <!-- <div class="app_button">
      <Button @click="fo">默认按键</Button>
      <Button type="blue" @click="fo2">主要按键</Button>
      <Button type="geent" @click="fo3">成功按键</Button>
      <Button type="orenge" @click="fo4">警告按键</Button>
      <Button type="red" @click="fo5">危险按键</Button>
    </div> -->


    <Button type="blue" @click="disabled=true">按键</Button>
    <Diaing title="温馨提示"  width="30%"  marginTop="112px" :disabled="disabled" @cloce="cloce">
      对话框
        <template v-slot:footer>
          <Button  @click="disabled=false">取消</Button>
          <Button type="blue" @click="disabled=false">确定</Button>
        </template>

    </Diaing> 
    
               


  </div>
</template>
<script>
export default {
  data(){
    return{
      disabled:false,
    }
  },
  methods:{
    fo(){
      console.log('默认点击功能')
    },
     fo2(){
      console.log('主要点击功能')
    },
     fo3(){
      console.log('成功点击功能')
    },
     fo4(){
      console.log('警告点击功能')
    },
     fo5(){
      console.log('危险点击功能')
    },
    // 父组件点击事件
    cloce(val){
      this.disabled=val
    }
  }
}
</script>

<style>
 
</style>
